<template>
  <vxe-table
      show-overflow
      row-key
      ref="xTree3"
      border="inner"
      :row-config="{isCurrent: true,isHover: true}"
      :show-header="false"
      :data="tableData2"
      :menu-config="tableMenu"
      @menu-click="contextMenuClickEvent"
      @edit-closed="editClosed"
      :checkbox-config="{labelField: 'name'}"
      :edit-config="{trigger: 'dblclick', mode: 'cell'}"
      :tree-config="{transform: true, accordion: true, line: true, iconOpen: 'fa fa-minus-square-o', iconClose: 'fa fa-plus-square-o'}">
    <vxe-column tree-node :edit-render="{}">
      <template #default="{ row }">
              <span>
                <template v-if="row.children && row.children.length">
                  <i class="tree-node-icon fa" :class="$refs.xTree3.isTreeExpandByRow(row) ? 'fa-folder-open' : 'fa-folder'" style="color: #F0D37A"></i>
                </template>
                <template v-else>
                  <i class="tree-node-icon fa fa-file-o" style="color: #F0D37A"></i>
                </template>
                <span>{{ row.name }}</span>
              </span>
      </template>
      <template #edit="{ row }">
        <vxe-input v-model="row.name" type="text"></vxe-input>
      </template>
    </vxe-column>
    <vxe-column title="操作" width="70px">
      <template #default="{ row }">
        <vxe-button type="text" style="color: #ff0000" icon="el-icon-delete"></vxe-button>
      </template>
    </vxe-column>
  </vxe-table>
</template>

<script>
/**
 *{ 专题目录 }
 * @param:
 * @author: 宋康
 * @DateTime: 2022/7/5
 */
export default {
  name: "SpecialList1",
  data() {
    return {
      tableMenu: {
        body: {
          options: [
            [
              {code: 'insertAt', name: '新增节点', disabled: false},
              {code: 'insertChildAt', name: '新增子节点', disabled: false},
              {code: 'rechristen', name: '重命名', disabled: false},
            ]
          ]
        },
        visibleMethod: this.visibleMethod
      },
      tableData2: [
        {id: 10000, parentId: null, name: '文化教育'},
        {id: 10050, parentId: null, name: '医疗卫生'},
        {id: 24300, parentId: 10050, name: 'Test3'},
        {id: 20045, parentId: 24300, name: 'test abc4'},
        {id: 10053, parentId: 24300, name: 'test abc96'},
        {id: 24330, parentId: 10053, name: 'test abc5'},
        {id: 21011, parentId: 10053, name: 'Test6'},
        {id: 22200, parentId: 10053, name: 'Test7'},
        {id: 23666, parentId: null, name: '气象'},
        {id: 23677, parentId: 23666, name: 'Test7'},
        {id: 23671, parentId: 23677, name: 'Test7'},
        {id: 23672, parentId: 23677, name: 'Test7'},
        {id: 23688, parentId: 23666, name: 'Test7'},
        {id: 23681, parentId: 23688, name: 'Test7'},
        {id: 23682, parentId: 23688, name: 'Test7'},
        {id: 24555, parentId: null, name: '第七次人口普查'},
        {id: 24566, parentId: 24555, name: '人口数量'},
        {id: 24577, parentId: 24555, name: '人口性别结构'}
      ]
    }
  },
  methods: {
    /**
     *{ 右键快捷键触发 }
     * @param:
     * @author: 宋康
     * @DateTime: 2022/7/5
     */
    async contextMenuClickEvent({menu, row}) {
      const $table = this.$refs['xTree3'];
      switch (menu.code) {
        case 'insertAt':
          const record = {
            name: '新建文件夹',
            id: Date.now(),
            parentId: row.parentId,
          }
          const {row: newRow} = await $table.insertAt(record, 0)
          await $table.setActiveRow(newRow) // 插入子节点
          break;
        case 'insertChildAt':
          const record2 = {
            name: '新建文件夹',
            id: Date.now(),
            parentId: row.id
          }
          const {row: newRow2} = await $table.insertAt(record2, -1)
          await $table.setTreeExpand(newRow2, true) // 将父节点展开
          await $table.setActiveRow(newRow2) // 插入子节点
          break;
        case 'rechristen':
          await $table.setActiveRow(row)
          break;
      }
    },
    /**
     *{ 编辑完成后触发 }
     * @param:
     * @author: 宋康
     * @DateTime: 2022/7/5
     */
    editClosed({row}) {
      console.log(row)
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-node-icon {
  width: 24px;
  text-align: center;
}
</style>